<style lang="scss" scoped>
.business {
    width: 100vw;
    background: url("../../static/images/index/index_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 99.9%;
    overflow: auto;
    .scroll-Y {
        width: 100%;
        padding: 0.8rem;
        box-sizing: border-box;
        ::v-deep .u-tab-item {
            padding: 0 !important;
            padding-right: 1rem !important;
        }
    }
}
.seachall {
    margin: 1rem 0;
}
.duanju_title {
    display: flex;
    align-items: center;
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
    .text {
        font-size: 1rem;
        font-weight: 600;
    }
    image {
        width: 1.5rem;
    }
}
.jiaocheng_box {
    display: flex;
    .list {
        margin-right: 0.5rem;
        image {
            width: 6rem;
            border-radius: 0.8rem;
        }
        .name {
            text-align: center;
            font-size: 0.4rem;
            color: #333;
        }
    }
}
.scroll-view_H {
    margin-top: 1rem;
    white-space: nowrap; //强制不换行
    .cateArr {
        display: flex;
        width: 100%;
        .list {
            font-size: 1rem;
            font-weight: 900;
            margin-right: 1rem;
        }
        .listactive {
            color: #fa9e62;
        }
    }
}
.footer_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .list {
        width: 48%;
        margin-top: 1rem;
        background-color: #fff;
        border-radius: 0.5rem;
        image {
            width: 100%;
        }
        .title {
            font-size: 0.5rem;
            height: 2rem;
            padding: 0 0.3rem;
        }
        .p {
            display: flex;
            font-size: 0.5rem;
            padding: 0.3rem;
            padding-top: 0;
            justify-content: space-between;
        }
    }
}
</style>

<template>
    <view class="business">
        <u-navbar-s></u-navbar-s>
        <scroll-view scroll-y="true" class="scroll-Y">
            <!-- top导航 -S -->
            <u-tabs :list="state.tabslist" :is-scroll="true" :current="state.current" @change="change" :showBar="false" :bgColor="''" :fontSize="'38'" :activeColor="'#000'"></u-tabs>
            <!-- top导航 -E -->
            <view>
                <!-- 切换页面 1 -S -->
                <view v-if="state.current == 0">
                    <!-- 搜索栏 -S -->
                    <view class="seachall">
                        <seachall @search="search" :placeholder="'请输入感兴趣的课程'"></seachall>
                    </view>
                    <!-- 搜索栏 -E -->
                    <!-- 操作教程 -S -->
                    <view class="duanju_title">
                        <view class="text">操作教程</view>
                        <image src="../../static/images/business/tutorial.png" mode="widthFix" />
                    </view>
                    <scroll-view scroll-x>
                        <view class="jiaocheng_box">
                            <view class="list" v-for="(item, index) in state.jiaochengArr" :key="index">
                                <image :src="item.image || ''" mode="widthFix" />
                                <view class="name"> {{ item.title || "" }} </view>
                            </view>
                        </view>
                    </scroll-view>
                    <!-- 操作教程 -E -->
                    <!-- 常见问题 -S -->
                    <scroll-view scroll-x class="scroll-view_H" @touchmove.stop>
                        <view class="cateArr">
                            <view class="list" v-for="(item, index) in state.cateArr" :key="index" :class="state.listactive == index ? 'listactive' : ''" @click="listactivetab(item, index)">
                                {{ item.name }}
                            </view>
                        </view>
                    </scroll-view>
                    <!-- 常见问题 -E -->
                    <!-- 常见问题-list -S -->
                    <view class="footer_list">
                        <view class="list" v-for="(item, index) in state.footerlist" :key="index">
                            <image :src="item.image" mode="widthFix" />
                            <view class="title">
                                {{ item.title || "" }}
                            </view>
                            <view class="p">
                                <view class="name">
                                    来源: {{item.author || ""}}
                                </view>
                                <view class="time">
                                    {{item.time||''}}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 常见问题-list -E -->
                </view>
                <!-- 切换页面 1 -E -->
                <!-- 切换页面 2 -S -->
                <view v-if="state.current == 1">wwwwww</view>
                <!-- 切换页面 2 -E -->
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getlists, getcate } from "@/api/business";
import seachall from "@/components/seachall/seachall.vue";
components: {
    seachall;
}
const state = reactive<{
    tabslist: Array;
    current: number;
    jiaochengArr: Array;
    cateArr: Array;
    listactive: number;
    windowHeight: number;
}>({
    footerlist: [],
    listactive: 0,
    cateArr: [],
    jiaochengArr: [],
    current: 0,
    tabslist: [
        {
            name: "课程攻略",
        },
        // {
        //   name: "发圈素材",
        // },
    ],
});
onLoad(() => {
    getData().then(() => {
        localData();
    });
    localData();
});
onShow(() => {
    console.log("onShow");
});
// 请求数据
const getData = async () => {
    const jiaochengArr = await getlists({ type: 3 });
    uni.setStorageSync("jiaochengArr", jiaochengArr);
    const cateArr = await getcate();
    uni.setStorageSync("cateArr", cateArr);
    const footerlist = await getlists({
        type: 1,
        cid: cateArr[state.listactive].id,
    });
    state.footerlist = footerlist.lists || [];
};
// 本地数据
const localData = () => {
    const jiaochengArr = uni.getStorageSync("jiaochengArr") || [];
    state.jiaochengArr = jiaochengArr.lists || [];
    const cateArr = uni.getStorageSync("cateArr") || [];
    state.cateArr = cateArr || [];
};
//  切换tab
const change = (index) => {
    state.current = index;
};
// 搜索
const search = (seachVal) => {
    console.log(seachVal);
};
// 常见问题 tab切换
const listactivetab = async (item, index) => {
    state.listactive = index;
    const footerlist = await getlists({
        type: 1,
        cid: item.id,
    });
    state.footerlist = footerlist.lists || [];
};
</script>
